<template>
	<view class="bg_login">
		<image class="bg_img" src="/static/images/home/register.png"></image>
		<view class="hh_cicle">
			<image class="hc_img" src="/static/images/home/login.png"></image>
			<text class="login_txt">欢迎登录智初小交</text>
		</view>
		<view class="login_box">
			<view class="form_box">
				<image class="img_size" src="/static/images/home/iphone.png"></image>
				<input type="text" placeholder-class="account-txt" v-model="params.mobileNo" @click="hideTabbar"
					maxlength="11" @blur="checkMebile(params.mobileNo)" class="uni-input" placeholder="请输入您的手机号" />
			</view>
			<view class="form_box">
				<image src="/static/images/home/password.png" class="img_size"></image>
				<view class="pwd-view">
					<input v-if="showPassword" class="uni-input" type="text" placeholder-class="account-txt"
						v-model="params.password" placeholder="请输入密码" />
					<!-- #ifndef MP-ALIPAY -->
					<input v-if="!showPassword" class="uni-input" type="password" placeholder-class="account-txt"
						v-model="params.password" placeholder="请输入密码" />
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<input v-if="!showPassword" class="uni-input" password placeholder-class="account-txt"
						v-model="params.password" placeholder="请输入密码" />
					<!-- #endif -->
					<image @click="showPass"
						:src="showPassword ? '/static/images/home/eye_icon.png' : '/static/images/home/eye-open.png'"
						class="img_eye"></image>
				</view>
			</view>
			<view class="login_btn">
				<button type="primary" class="btn_pri" style="background-color: #477EDA;" @click="toLogin">登录</button>
			</view>
			<view class="txt_box">
				<text class='txt_txt' @click="jumpFixedPass">忘记密码?</text>
				<text class='txt_txt txt_txt1' @click="jumpRegister('register')">新用户注册</text>
			</view>
		</view>
		<view class="login_btn_box" style="display: none;">
			<!-- #ifdef APP-PLUS -->
			<button v-if="!isIos" @click="getPhoneNum" class="l_btn_txt">
				<image src="/static/images/home/weixin.png" class="login_wx"></image>
				<text class="btn_txt">一键授权微信登录</text>
			</button>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<button @getphonenumber="getPhoneNum" class="l_btn_txt" open-type='getPhoneNumber'>
				<image src="/static/images/home/weixin.png" class="login_wx"></image>
				<text class="btn_txt">一键授权微信登录</text>
			</button>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<button @click="authorize" class="l_btn_txt">
				<image src="/static/images/home/weixin.png" class="login_wx"></image>
				<text class="btn_txt">一键授权微信登录</text>
			</button>
			<!-- #endif -->
			<!-- 苹果登录 -->
			<!-- <view class="sign-in-with-apple" v-if="system >= 13 && platform=='ios'" @click="appleLogin">sign in with apple</view> -->
			<!-- <view class="sign-in-with-apple" @click="appleLogin">sign in with apple</view> -->
		</view>
		<mcModal :isShow="showMcModal" :content="content" :title="title" @cancel='bb()' :inp="false" @ok='cc()'
			:okBtn='okBtn'></mcModal>
		<tmcModal :isShow="showMcModal1" :showCancel="false" :content="content1" :title="title1" @ok='queren'>
		</tmcModal>
	</view>
</template>

<script>
	import {
		login,
		getAlipayAccessToken,
		wxGetOpenId,
		wxLogin,
		appWxLogin,
		getWebAccessToken
	} from '../../common/api/index.js';
	import {
		_showLoading,
		_showToast,
		funcUrlDel
	} from '../../common/js/util.js'
	import {
		wx_mini_appid,
		ali_mini_appid
	} from '../../common/utils/pay_center.js'
	import mcModal from '../../components/custom-modal/custom-modal.vue'
	import tmcModal from '../../components/custom-modal/mc-modal.vue'
	import {
		appid
	} from '../../common/utils/config.js'
	export default {
		data() {
			return {
				params: {
					mobileNo: '',
					password: ''
				},
				showPassword: false,
				authorization: '',
				obj: {},
				obj2: {},
				tabbar: true,
				windowHeight: '',
				unionid: '',
				showMcModal: false,
				content: '',
				title: '',
				showMcModal1: false,
				content1: '',
				title1: '',
				isPhone: '',
				okBtn: '',
				isIos: false,
				system: '', // 系统版本
				platform: '', // 平台
				wxCode: ''
			}
		},
		onLoad() {
			// 先判断 系统版本
			// #ifndef H5
			uni.getSystemInfo({
				success: (res) => {
					this.system = res.system
					this.platform = res.platform
				},
				fail: (err) => {},
				complete: () => {}
			})
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight;
				}
			});
			uni.onWindowResize((res) => {
				if (res.size.windowHeight < this.windowHeight) {
					this.tabbar = false
				} else {
					this.tabbar = true
				}
			})
			// #endif
		},
		onShow() {
			// #ifdef H5
			this.getCode()
			// #endif
		},
		components: {
			mcModal,
			tmcModal
		},
		mounted() {
			// #ifdef MP-WEIXIN
			this.appLoginWx()
			// #endif
			// #ifdef APP-PLUS
			if (uni.getSystemInfoSync().platform == 'ios') {
				this.isIos = true
			}
			// #endif
		},
		methods: {
			hideTabbar() {
				this.tabbar = false;
			},
			onGetAuthorize(e) {
				console.log(e)
			},
			// 苹果登录
			appleLogin() {
				// 判断是 iOS13版本
				uni.login({
					provider: 'apple',
					success: (loginRes) => {
						uni.getUserInfo({
							provider: 'apple',
							success: (userInfoRes) => {
								console.log(userInfoRes)
							},
							fail: (err) => {
								console.log(err)
							}
						})
					},
					fail: (err) => {
						console.log(err)
					}
				})
			},
			bb() {
				this.showMcModal = false
			},
			cc() {
				if (this.isPhone == '手机号') {
					this.showMcModal = false
					this.params.mobileNo = ''
				} else if (this.isPhone == '授权') {
					this.showMcModal = false
					uni.navigateTo({
						url: './register?type=appLogin&unionid=' + this.unionid
					})
				} else {
					this.showMcModal = false
				}
			},
			queren() {},
			getCode() {
				let url = window.location.href.split('#')[0]
				let serch = url.split('?')[1]
				let arr = serch.split('&')
				let code = arr[2].split('code=')[1]
				this.wxCode = code
				if (code) {
					this.h5LoginWx()
				}
			},
			authorize() {
				let local = encodeURIComponent(window.location.href);
				let gzgappId = uni.getStorageSync('str1')
				window.location.href = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=" + gzgappId +
					"&redirect_uri=" + local + "&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect";
			},
			h5LoginWx() {
				let xappId = uni.getStorageSync('str1')
				getWebAccessToken({
					code: this.wxCode,
					// xappId: 'wxd0572409648a8520'
					xappId: xappId
				}).then(res => {
					if (res.resultCode == 0) {
						uni.hideLoading()
						if (res.openid != null) {
							uni.setStorageSync('openId', res.openid)
							this.unionid = res.unionid
							let obj = {
								unionid: res.unionid,
								openId: res.openid
							}
							appWxLogin(obj).then(res => {
								if (res.resultCode == 0) {
									uni.setStorageSync('s_userId', res.userId)
									uni.setStorageSync('s_login', true)
									uni.setStorageSync('s_mobile', res.phone)
									window.history.pushState({}, 0, funcUrlDel(
										'code'));
									window.history.pushState({}, 0, funcUrlDel(
										'state'));
									uni.switchTab({
										url: '/pages/home/home'
									})
								} else if (res.resultCode == 404) {
									// this.jumpRegister('appLogin')
									this.showTxt('温馨提示', '首次授权登录请绑定您的手机号码', () => {
										this.jumpRegister('appLogin')
									})
								} else {
									_showToast(res.resultMsg)
								}
							}).catch(err => {
								console.log(err)
							})
						}
					} else {
						uni.hideLoading()
					}
				}).catch(err => {
					console.log(err)
					uni.hideLoading()
				})
			},
			getPhoneNum(e) {
				this.obj2 = e;
				this.getPhone()
			},
			getPhone() {
				_showLoading('登录中,请稍后…')
				// #ifdef APP-PLUS
				uni.login({
					provider: 'weixin',
					success: (res) => {
						console.log('login success:', res);
						appWxLogin({
							...res.authResult
						}).then(reslog => {
							this.unionid = res.authResult.unionid
							uni.hideLoading()
							if (reslog.resultCode == 0) {
								uni.setStorageSync('s_userId', reslog.userId)
								uni.setStorageSync('s_login', true)
								uni.setStorageSync('s_mobile', reslog.phone)
								uni.switchTab({
									url: '/pages/home/home'
								})
							} else if (reslog.resultCode == 404) {
								// this.jumpRegister('appLogin')
								this.showTxt('温馨提示', '首次授权登录请绑定您的手机号码', () => {
									this.jumpRegister('appLogin')
								})
							} else {
								_showToast(reslog.resultMsg)
							}
						})
					},
					fail: (err) => {
						console.log('login fail:', err);
					}
				});
				// #endif
				// #ifdef MP-WEIXIN
				wxLogin({
					sessionKey: this.obj.session_key,
					encryptedData: this.obj2.detail.encryptedData,
					iv: this.obj2.detail.iv,
					openId: this.obj.openid,
					unionid: this.obj.unionid
				}).then(res => {
					if (res.resultCode == 0) {
						uni.hideLoading()
						uni.setStorageSync('s_userId', res.userId)
						uni.setStorageSync('s_login', true)
						uni.setStorageSync('s_mobile', res.phone)
						uni.switchTab({
							url: '/pages/home/home'
						})
					} else {
						_showToast(res.resultMsg)
					}
				}).catch(err => {
					console.log(err)
				})
				// #endif
			},
			appLoginWx() {
				let _that = this
				uni.login({
					provider: 'weixin',
					success: function(response) {
						if (response.errMsg == "login:ok") {
							wxGetOpenId({
								code: response.code,
								xappId: wx_mini_appid
							}).then(res => {
								if (res.resultCode == 0) {
									_that.obj = res
								} else {
									uni.hideLoading()
								}
							}).catch(err => {
								console.log(err)
							})
						}
					},
				})
			},
			showPass() {
				this.showPassword = !this.showPassword;
			},
			jumpFixedPass() {
				uni.navigateTo({
					url: './forbirdPass'
				})
			},
			showTxt(title, content, fn) {
				this.title1 = title
				this.content1 = content
				this.showMcModal1 = true
				this.queren = () => {
					this.showMcModal1 = false
					if (typeof fn == 'function') fn()
				}
			},
			checkMebile(str) {
				let reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
				if (reg.test(str)) {
					return true;
				} else {
					this.txtShow('操作失误', '请输入正确格式的手机号码', '重新输入', '手机号')
					return false;
				}
				this.tabbar = true;
			},
			jumpRegister(type) {
				uni.navigateTo({
					url: './register?type=' + type + '&unionid=' + this.unionid
				})
				// if(type == 'appLogin') {
				// } else {
				// }
			},
			txtShow(title, content, okBtn, isPhone) {
				this.title = title
				this.content = content
				this.okBtn = okBtn
				this.isPhone = isPhone
				this.showMcModal = true
			},
			toLogin() {
				if (this.params.mobileNo == '') {
					this.showTxt('温馨提示', '手机号不能为空')
				} else if (this.params.password == '') {
					this.showTxt('温馨提示', '密码不能为空')
				} else {
					let _this = this;
					_showLoading('登录中,请稍后…')
					// #ifdef APP-PLUS
					let xuserId = uni.getStorageSync('str2')
					let appId = uni.getStorageSync('str1')
					login({
						mobileNo: _this.params.mobileNo,
						password: _this.params.password,
						appId: appId,
						openId: xuserId
					}).then(res => {
						if (res.resultCode == 0) {
							uni.hideLoading()
							uni.setStorageSync('s_userId', res.userId)
							uni.setStorageSync('s_empId', res.empId)
							uni.setStorageSync('s_login', true)
							uni.setStorageSync('s_mobile', _this.params.mobileNo)
							if (res.token) {
								uni.setStorageSync('ZJTOKEN', res.token); //保存Cookie到Storage
							}
							uni.switchTab({
								url: '/pages/home/home'
							})
						} else {
							uni.hideLoading()
							_this.txtShow('温馨提示', `登录失败, ${res.resultMsg}`, '重新输入', false)
						}
					}).catch(err => {
						console.log(err)
					})
					// #endif
					// #ifdef H5
					let xuserId = uni.getStorageSync('str2')
					let appId = uni.getStorageSync('str1')
					login({
						mobileNo: _this.params.mobileNo,
						password: _this.params.password,
						appId: 1,
						openId: xuserId
					}).then(res => {
						if (res.resultCode == 0) {
							uni.hideLoading()
							uni.setStorageSync('s_userId', res.userId)
							uni.setStorageSync('s_login', true)
							uni.setStorageSync('s_mobile', _this.params.mobileNo)
							uni.switchTab({
								url: '/pages/home/home'
							})
						} else {
							uni.hideLoading()
							_this.txtShow('温馨提示', `登录失败, ${res.resultMsg}`, '重新输入', false)
						}
					}).catch(err => {
						console.log(err)
					})
					// #endif
					// #ifdef MP-ALIPAY
					uni.login({
						scopes: 'auth_base',
						success: function(response) {
							if (response.errMsg == "login:ok") {
								getAlipayAccessToken({
									xappId: ali_mini_appid,
									code: response.code
								}).then(ress => {
									if (ress.resultCode == 0) {
										login({
											mobileNo: _this
												.params
												.mobileNo,
											password: _this
												.params
												.password,
											appId: 100,
											openId: ress
												.aliUserId
										}).then(res => {
											if (res
												.resultCode ==
												0) {
												uni.hideLoading()
												uni.setStorageSync(
													's_userId',
													res
													.userId
												)
												uni.setStorageSync(
													's_login',
													true
												)
												uni.setStorageSync(
													's_mobile',
													_this
													.params
													.mobileNo
												)
												uni.switchTab({
													url: '/pages/home/home'
												})
											} else {
												uni.hideLoading()
												_this.txtShow(
													'温馨提示',
													`登录失败, ${res.resultMsg}`,
													'重新输入',
													false
												)
											}
										}).catch(err => {
											console.log(err)
										})
									} else {
										_this.txtShow('温馨提示',
											`登录失败, ${ress.resultMsg}`,
											'重新输入', false)
									}
								}).catch(err => {
									console.log(err)
								})
							}
						},
						complete: function() {
							// uni.hideLoading();
						}
					})
					// #endif
					// #ifdef MP-WEIXIN
					uni.login({
						provider: 'weixin',
						success: function(response) {
							if (response.errMsg == "login:ok") {
								login({
									mobileNo: _this.params.mobileNo,
									password: _this.params.password,
									appId: 100,
									code: response.code,
									openId: _this.obj.openid
								}).then(res => {
									if (res.resultCode == 0) {
										uni.setStorageSync('s_userId', res
											.userId)
										uni.setStorageSync('s_login', true)
										uni.setStorageSync('s_mobile',
											_this.params.mobileNo)
										uni.hideLoading()
										uni.switchTab({
											url: '/pages/home/home'
										})
									} else {
										uni.hideLoading()
										_this.txtShow('温馨提示',
											`登录失败, ${res.resultMsg}`,
											'重新输入', false)
									}
								}).catch(err => {
									console.log(err)
								})
							}
						},
						complete: function() {
							uni.hideLoading();
						}
					})
					// #endif
				}
			}
		}
	}
</script>

<style lang="scss">
	.bg_login {
		width: 100vw;
		/* #ifndef MP-WEIXIN*/
		height: calc(100vh - 50px);
		/* #endif */
		/* #ifdef MP-WEIXIN*/
		height: 100vh;
		/* #endif */
		overflow: hidden;
		position: relative;

		.bg_img {
			width: 100%;
			height: 390rpx;
		}

		.hh_cicle {
			position: absolute;
			top: 7%;
			left: 10%;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;

			.hc_img {
				width: 140rpx;
				height: 150rpx;
			}

			.login_txt {
				font-size: 42rpx;
				font-family: "PingFangSC-Heavy, PingFang SC";
				font-weight: 800;
				color: #333333;
				margin-top: 20rpx;
			}
		}

		.login_box {
			width: 80%;
			// position: absolute;
			// top: 410rpx;
			// left: 10%;
			margin: 0 auto;

			// border: 1px solid red;
			.form_box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-bottom: 30rpx;
				height: 84rpx;
				padding: 0 20rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				border: 1px solid #E6E6E6;

				.img_size {
					width: 24px;
					height: 24px;
				}

				.pwd-view {
					flex: 1;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.img_eye {
						width: 18px;
						height: 18px;
					}
				}

				.account-txt {
					font-size: 28rpx;
				}
			}

			.login_btn {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.btn_pri {
					margin-top: 60rpx;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					width: 90%;
					font-size: 32rpx;
					font-family: "PingFangSC-Heavy, PingFang SC";
					font-weight: 600;
					color: #FFFFFF;
					background: linear-gradient(90deg, #0685FF 0%, #285EFF 100%);
					box-shadow: 0px 8px 16px 0px rgba(36, 98, 255, 0.24);
					border-radius: 8rpx;
				}
			}

			.txt_box {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-top: 40rpx;
				padding: 0 30rpx;

				.txt_txt {
					font-size: 28rpx;
					font-family: "PingFang-SC-Medium, PingFang-SC";
					font-weight: 500;
					color: #6B707A;
				}

				.txt_txt1 {
					color: #185AFF;
				}
			}
		}
	}

	.uni-input {
		flex: 1;
		padding: 10rpx;
	}

	button {
		background-color: #FFFFFF;
	}

	button::after {
		border: none;
	}

	.login_btn_box {
		position: fixed;
		bottom: 20rpx;
		// margin-top: 125rpx;
		// z-index: 1;
		width: 100%;
		display: flex;
		flex-direction: row;

		.l_btn_txt {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding: 24rpx 24rpx 0;

			.login_wx {
				width: 30px;
				height: 30px;
			}

			.btn_txt {
				font-size: 28rpx;
				font-family: "PingFang-SC-Medium, PingFang-SC";
				font-weight: 500;
				color: #6B707A;
			}
		}
	}
</style>